<template>
	<div class="duoshangpin">
    <left></left>
    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">直播推广</el-breadcrumb-item>
          <el-breadcrumb-item>多商品页</el-breadcrumb-item>
        </el-breadcrumb>
        <top></top>
      </div>
      <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
        <div class="tishi" style="color: rgb(0, 90, 255); font-size: 12px; background: rgb(222, 233, 251);border-radius: 10px; padding: 10px 20px;">商城页为多商品罗列在一个页面中，支持分类展示，可用于直播挂载、信息流推广等，如需支付请填写收款配置</div>

        <div class="flex" style="margin: 30px 0;">
          <div style="margin-right: 20px;"><el-button @click="chuangjian" type="primary" round >发布直播销售页</el-button></div>
          <div><el-button @click="log = true" round >根据已有商城页快速创建</el-button></div>
        </div>

        <div style="margin-top: 20px;">
          <div class="flex tableh">
            <div class="tablehli">页面名称</div>
            <div class="tablehli">页面类型</div>
            <div class="tablehli">商家商品数</div>
            <div class="tablehli">PV</div>
            <div class="tablehli">UV</div>
            <div class="tablehli">今日销售</div>
            <div class="tablehli">销售页链接</div>
            <div class="tablehli">操作</div>
          </div>
          <div class="flex tableb" v-for="(item,index) in list" :key="index" >
            <div class="tablebli">{{ item.store_name }}</div>
            <div class="tablebli">多商品页</div>
            <div class="tablebli">{{ item.mobile }}</div>
            <div class="tablebli">{{ item.name }}</div>
            <div class="tablebli">{{ item.name }}</div>
            <div class="tablebli">{{ item.name }}</div>
            <div class="tablebli">
              <el-button @click="copy2(item)" type="text">复制链接</el-button>
              <el-button @click="creatQrCode(item)" type="text">下载二维码</el-button>
            </div>
            <div class="tablebli">
              <el-button @click="go('/zhibotuiguang/duoshangpin/duoshangpinlist',item.id)" type="text">管理商品</el-button>
              <el-button @click="go('/zhibotuiguang/fabu2',item.id)" type="text">编辑</el-button>
              <el-button @click="delbtn(item)" type="text">删除</el-button>
            </div>
          </div>
        </div>
        <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :page-size="search.page_size"
            @current-change = 'pagechange' :total="total"></el-pagination>
			<!-- <footers></footers> -->
      </div>
    </div>
    <!-- 修改备注名 -->
<!--    <el-dialog  title="根据已有直播页发布页面" :visible.sync="log" center :close-on-click-modal="false" width="500px">
      <div style="margin-bottom: 20px;">通过商品名称发布</div>
      <el-select v-model="all.produce_warning" style="width: 100%;" placeholder="请选生产交异常预警比例">
        <el-option  v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"> </el-option>
      </el-select>
      <div style="margin-top: 20px; text-align: center;">
        <el-button round @click="log = false">取 消</el-button>
        <el-button round type="primary" @click="fabu">确 定</el-button>
      </div>
    </el-dialog> -->

    <el-dialog  title="创建多商品销售页" :visible.sync="log2" center :close-on-click-modal="false" width="500px">
      <el-input v-model="all.store_name" placeholder="请输入直播页名称" ></el-input>
      <div style="margin-top: 20px; text-align: center;">
        <el-button round @click="log2 = false">取 消</el-button>
        <el-button round type="primary" @click="chuangjiango">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title+'二维码'" :visible.sync="img_log5" center width="420px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="flexcc"><div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto;"></div></div>
      <div style="text-align: center; color: rgb(26, 18, 243); margin-top: 30px;" @click="xiazai">保存二维码</div>
    </el-dialog>

	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import QRCode from 'qrcodejs2'
	export default {
		name: 'duoshangpin',
    components:{
      left,top,footers
    },
		data() {
			return {
        all:{
          store_name:""
        },
        log:false,
        log2:false,

        img_log5:false,
        title:"",

        search:{
          page:1,
          page_size:20,
        },
        total:0,
        list:[],

			}
		},
		created() {
      //列表
      this.getlist()
		},
		mounted() {

		},
		methods: {
      //复制链接和生成二维码用的是/h5?id=${item.id}`
      copy2:function(item){
        this.copy(`${window.location.origin}/h5?shops_id=${item.id}`)
      },
      creatQrCode(item) {
        this.title = item.store_name
        this.img_log5 = true
        this.$nextTick(()=>{
          this.$refs.qrCodeUrl.innerHTML = '';
          let url = `${window.location.origin}/h5?shops_id=${item.id}`
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: url, // 需要转换为二维码的内容
              width: 200,
              height: 200,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })
        })
      },
      xiazai:function(){
        let img = document.getElementsByClassName('qrcode')[0].childNodes[1]
        var a = document.createElement('a');
                 a.download = 'erweima';//这边是文件名，可以自定义
                 a.href = img.src;
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
      },
      chuangjian:function(){
        this.all = {
          store_name:"",
          store_slogan:"我的微小店介绍",
          top_pic:"https://test91.91haoka.cn/shouye1.png",
          left_pic:"https://test91.91haoka.cn/shouye2.png",
          right_pic:"https://test91.91haoka.cn/shouye9.png"
        }
        this.log2 = true
      },
      chuangjiango:function(){
        axios.post('/own/fstore/update',this.all).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('添加成功');
            this.log2 = false
            this.getlist()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fabu:function(){

      },
      //列表
      getlist(){
        axios.get('/api/flow/storelist',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data
            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      //分页
      pagechange(val){
        console.log(val)
        this.search.page = val
        //列表
        this.getlist()
      },
      //搜索
      searchbtn(){
        this.search.page = 1
        this.getlist()
      },
      //删除
      delbtn(item){
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/own/fstore/delete',{
            id:item.id
          }).then((response)=>{
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
		}
	}
</script>


<style scoped >
 .t_over_text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 40px);
 }
</style>
